<template>
    <div class="cimrts-panel">
        <div class="panel-list" v-for="(item, index) in menuList" :key="index" :title="item.name"
            @click="clickComponent(item)" @mouseenter.stop="enterComponent(item)"
            @mouseleave.stop="leaveComponent(item)"
            :class="{ 'active': isChecked && item.status === 'active', 'hover': item.status === 'hover', 'none': isDisabled }">
            <img :src="setIcon(item)" alt="">
        </div>
    </div>
</template>
<script setup lang="ts">
import { watch } from 'vue'

const props = withDefaults(defineProps<{
    // 是否禁用
    isDisabled: boolean
    // 列表
    menuList: any,
    // 是否选中
    isChecked: boolean,

}>(), {
    menuList: [],
    isDisabled: false,
    isChecked: false,
});
const emits = defineEmits(["clickComponent"]);

// 设置图片
const setIcon = (item: any) => {
    switch (item.status) {
        case "none":
            return item.icon;
        case "active":
            return item.activeIcon;
        case "hover":
            return item.hoverIcon;
        default: return undefined

    }
}

// 鼠标移入组件
const enterComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "hover"
}

// 鼠标移出组件
const leaveComponent = (item: any) => {
    if (item.status == "active") return;
    item.status = "none"

}

// 鼠标点击组件
const clickComponent = (item: any) => {
    if (item.isOnly) props.menuList.map((e: any) => (e.id !=item.id) && e.isOnly && (e.status = "none"))
    emits('clickComponent', item)
}

</script>

<style scoped>
.cimrts-panel {
    height: 40px;
    width: 100%;
    background-color: #f0f0f0;
    display: flex;
    gap: 2px;
    padding-left: 5px;
    user-select: none;

}


.panel-list {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
}


.panel-list>img {
    width: 20px;
    height: 20px;
}

.active {
    background-color: #537cfe;
}

.hover {
    background-color: #cfd8f3;
}

.none {
    pointer-events: none;
}
</style>